<template>
  <div class>
    <h2 class="first-title">Button示例</h2>
    <Demo :component="Button1Demo" />
    <Demo :component="Button2Demo" />
    <Demo :component="Button3Demo" />
    <Demo :component="Button4Demo" />
  </div>
</template>
<script lang="ts">
import Demo from "./Demo.vue";
import Button1Demo from "./Button1.demo.vue";
import Button2Demo from "./Button2.demo.vue";
import Button3Demo from "./Button3.demo.vue";
import Button4Demo from "./Button4.demo.vue";
export default {
  components: { Demo },
  setup() {
    return { Button1Demo, Button2Demo, Button3Demo, Button4Demo };
  },
};
</script>
<style lang="scss" scoped>
.first-title {
  font-size: 1.5em;
  margin-bottom: 20px;
}
.second-title {
  > h1 {
    position: relative;
    font-size: 1.2em;
    margin-bottom: 10px;
  }
  > p {
    font-size: 0.9em;
    margin-bottom: 20px;
    > span {
      font-weight: 700;
      color: rgb(255, 31, 31);
      font-size: 20px;
      margin: 0 10p;
    }
  }
}
.second-demos {
  border-radius: 5px;
  margin: 16px 0px 32px;
  max-width: 100%;
  padding: 15px;
  background-color: #fafafa;
  border: 1px solid #eaeefb;
  > button {
    margin: 15px;
  }
}
</style>